<template>
  <el-card style="flex: 1;height: calc(100vh - 70px);margin: 10px 5px;border-radius: 20px;margin-top: 55px">
    <template #header>
      <div class="card-header">
        <span><h2>数据概览</h2></span>
        <br>
        <div style="display: flex">
          <div style="flex: 1">
            <el-button-group class="button-group">
              <el-button type="default" :color="col1" @click="bt1">本周</el-button>
              <el-button type="default" :color="col2" @click="bt2">上周</el-button>
              <el-button type="default" :color="col3" @click="bt3">本月</el-button>
              <el-button type="warning" @click="load">搜索</el-button>
            </el-button-group>
          </div>
          <div style="flex: 2"></div>
          <div style="flex: 1">
            <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="~"
                @change="bt4"
            />
          </div>
        </div>
      </div>
    </template>
    <div>
      <el-row style="margin: 10px">
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('新增')">
          <el-col>
            <img src="../assets/img/resume_green.png">
            <h1 style="color:black;">{{ resumeState[0] }}</h1>
            <br>
            <div style="color:black;">新增简历</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('初筛')">
          <el-col>
            <img src="../assets/img/resume_green.png">
            <h1 style="color:black;">{{ resumeState[1] }}</h1>
            <br>
            <div style="color:black;">已初筛</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('推荐')">
          <el-col>
            <img src="../assets/img/resume_green.png">
            <h1 style="color:black;">{{ resumeState[2] }}</h1>
            <br>
            <div style="color:black;">已推荐</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid"  @click="clickData('初试')">
          <el-col>
            <img src="../assets/img/resume_blue.png">
            <h1 style="color:black;">{{ resumeState[3] }}</h1>
            <br>
            <div style="color:black;">已初试</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('复试')">
          <el-col>
            <img src="../assets/img/resume_blue.png">
            <h1 style="color:black;">{{ resumeState[4] }}</h1>
            <br>
            <div style="color:black;">已复试</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('终试')">
          <el-col>
            <img src="../assets/img/resume_yellow.png">
            <h1 style="color:black;">{{ resumeState[5] }}</h1>
            <br>
            <div style="color:black;">已终试</div>
          </el-col>
        </el-button>
      </el-row>
      <el-row style="margin: 10px">
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('offer')">
          <el-col>
            <img src="../assets/img/resume_pink.png">
            <h1 style="color:black;">{{ resumeState[6] }}</h1>
            <br>
            <div style="color:black;">已offer</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('入职')">
          <el-col>
            <img src="../assets/img/resume_pink.png">
            <h1 style="color:black;">{{ resumeState[7] }}</h1>
            <br>
            <div style="color:black;">已入职</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('过保')">
          <el-col>
            <img src="../assets/img/resume_green.png">
            <h1 style="color:black;">{{ resumeState[8] }}</h1>
            <br>
            <div style="color:black;">已过保</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('职位')">
          <el-col>
            <img src="../assets/img/resume_red.png">
            <h1 style="color:black;">{{ resumeState[9] }}</h1>
            <br>
            <div style="color:black;">新增职位</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('客户')">
          <el-col>
            <img src="../assets/img/resume_red.png">
            <h1 style="color:black;">{{ resumeState[10]}}</h1>
            <br>
            <div style="color:black;">新增客户</div>
          </el-col>
        </el-button>
        <el-button style="flex: 1;color: bisque;height: 30vh;margin: 0 5px;border-radius: 10px;border-style: solid" @click="clickData('沟通记录')">
          <el-col>
            <img src="../assets/img/resume_sea.png">
            <h1 style="color:black;">{{ resumeState[11] }}</h1>
            <br>
            <div style="color:black;">沟通记录</div>
          </el-col>
        </el-button>
      </el-row>
    </div>
  </el-card>

  <el-dialog v-model="dataShow" :title="dataName">
    <template #header>
      <span>
        {{diaTitle}}
      </span>
    </template>
    <el-table
        :data="ResumeList"
        style="border-radius: 15px"
        height="530"
    >
      <el-table-column prop="resumename" label="姓名"/>
      <el-table-column prop="gender" label="性别"/>
      <el-table-column prop="age" label="年龄" sortable/>
      <el-table-column prop="indn" label="目前行业" />
      <el-table-column prop="inde" label="期望行业" />
      <el-table-column prop="time" label="投递时间" />
    </el-table>

<!--    <template #footer>-->
<!--      <el-button @click="dataShow=false">取消</el-button>-->
<!--      <el-button type="primary" @click="dataPlay">确定</el-button>-->
<!--    </template>-->

  </el-dialog>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      date: [],
      col1: "cornflowerblue",
      col2: "white",
      col3: "white",
      col4: "white",
      resumeState:[],
      dataShow:false,
      dataName:"",
      diaTitle:"",
      ResumeList:[],
    }
  },
  created() {
    this.bt1()
    this.load()
  },
  methods: {
    load(){
      console.log(this.date)
      request.get('/home/load',
          {
            params:{
              t1:this.date[0],
              t2:this.date[1],
            }
          }).then(res=>{
        console.log(res)
        this.resumeState=res.data
      })

    },
    bt1() {
      this.col1 = "cornflowerblue"
      this.col2 = "white"
      this.col3 = "white"
      this.col4 = "white"
      var date = new Date();
      date.setDate(date.getDate() - date.getDay())
      var begin = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
      date.setDate(date.getDate() + 6)
      var end = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
      this.date = [begin, end]
    },
    bt2() {
      this.col1 = "white"
      this.col2 = "cornflowerblue"
      this.col3 = "white"
      this.col4 = "white"
      var date = new Date();
      date.setDate(date.getDate() - date.getDay() - 7)
      var begin = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
      date.setDate(date.getDate() + 6)
      var end = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
      this.date = [begin, end]
    },
    bt3() {
      this.col1 = "white"
      this.col2 = "white"
      this.col3 = "cornflowerblue"
      this.col4 = "white"
      var t = new Date()
      var begin = new Date(t.getFullYear(),t.getMonth(),1)
      var end = new Date(t.getFullYear(), t.getMonth() + 1, 0)
      begin = begin.getFullYear()+"-"+(begin.getMonth()+1)+"-"+begin.getDate()
      end = end.getFullYear()+"-"+(end.getMonth()+1)+"-"+end.getDate()
      this.date = [begin, end]
    },
    bt4(val){
      var begin=val[0]
      var end=val[1]
      begin = begin.getFullYear()+"-"+(begin.getMonth()+1)+"-"+begin.getDate()
      end = end.getFullYear()+"-"+(end.getMonth()+1)+"-"+end.getDate()
      this.date = [begin, end]
      this.col1 = "white"
      this.col2 = "white"
      this.col3 = "white"
      this.col4 = "white"
    },
    clickData(val){
      this.diaTitle=val
      request.get('/resume/select',
          {
            params:{
              rstate:this.diaTitle,
              time1:this.date[0],
              time2:this.date[1],
            }
          }).then(res=>{
        console.log(res)
        if(res.code==='0'){
          this.ResumeList=res.data
        }
      })
      this.dataShow=true
    },
  },
}
</script>

<style scoped>
img {
  width: 120px;
  height: 120px;
}

</style>